
<template>
  <div class="gird-container">
    <div v-show="isNull">
      <el-empty description="您搜索的数据未空"></el-empty>
    </div>
    <div class="gird-box" v-show="!isNull">
      <div
        class="gird-item"
        v-for="(item, index) in moreItem"
        :key="index"
        :style="{
          width: 'calc(100' + '%/' + girdShowNum + ')',
          aspectRatio: aspectRatio,
        }"
      >
        <div class="item-container">
          <div class="grid-item" @click="toInfo(item)">
            <div class="grid-img-box">
              <div class="popup">查看详情</div>
              <el-image
                class="grid-img"
                :src="item.url"
                :fit="cover"
              ></el-image>
            </div>
            <div class="grid-text">
              <div class="name">
                <h1>{{ item.name }}</h1>
              </div>
              <div class="price-box">
                <img src="@/image/logo-min.png" alt="" />
                <div class="price">
                  <p>{{ item.price == 0 ? item.iprice : item.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Grid",
  props: {
    girdShowNum: {
      type: Number,
      default: 0,
    },
    aspectRatio: {
      type: String,
      default: "none",
    },
    type: {
      typeof: String,
      default: "itemGroups",
    },
    search: {
      typeof: String,
      default: "",
    },
    sort: {
      typeof: String,
      default: "time",
    },
  },
  data() {
    return {
      isNull: false,
      aspectRatios: "none",
      moreItem: [],
      items: [],
      cover: "cover",
    };
  },
  methods: {
    updateItemGroups(data) {
      this.$axios
        .postInfo("/itemGroup", { id: null })
        .then((res) => {
          let itemGroup = res.itemGroups;
          let items = res.items;
          for (let i = 0; i < itemGroup.length; i++) {
            this.$set(itemGroup[i], "price", items[i].price);
            this.$set(itemGroup[i], "itemstate", items[i].itemState);
            this.$set(itemGroup[i], "numbering", items[i].numBerIng);
          }
          this.moreItem = res.itemGroups
            .slice(0)
            .reverse()
            .sort((a, b) => {
              return b.sort - a.sort;
            });
          console.log(res);
          console.log(this.moreItem);
          this.isNull = false;
          // setTimeout(this.$loading.hideLoading(),1000)
        })
        .catch((error) => {
          this.isNull = true;
        });
    },
    updateItems() {
      // this.$loading.showLoading();
      let query = {};
      console.log(this.sort);
      // this.$set(query, this.sort, this.sort);
      this.$set(query, this.search, this.search);
      this.$set(query, "itemState", "1");
      console.log(query);
      this.$axios.postInfo("/items", query).then((res) => {
        console.log(res);
        let items = res.items;
        let arr = [];
        items.forEach((item) => {
          if (item.name.indexOf(this.search) >= 0) {
            arr.push(item);
          }
        });

        this.moreItem = arr.slice(0);

        if(this.sort=="down"){
          this.moreItem.sort((x, y) => {
            console.log(this.listFilterRadio);
            return x.price - y.price;
          });
        }else if(this.sort=="up"){
          this.moreItem.sort((x, y) => {
            console.log(this.listFilterRadio);
            return y.price - x.price;
          });
        }
        // else{
        //   this.moreItem.sort((x, y) => {
        //     console.log(this.listFilterRadio);
        //     return y.tiem-x.tiem;
        //   });
        // }
       
        // setTimeout(this.$loading.hideLoading(),1000)
      });
    },
    toInfo(item) {
      if(this.$cookies.get("token")==null||this.$cookies.get("token")==undefined){
        this.$message.promptBox("用户未登录","warning")
        this.$router.replace("login")
        
      }else if (item.itemid === undefined) {
        console.log(item);
        this.$axios
          .postInfo("/items", {
            price: "up",
            itemsId: item.id,
            itemState: item.itemstate,
          })
          .then((res) => {
            let getItem = res.items[0];
            console.log(res);
            this.$router.push({
              path: "item",
              query: { group: getItem.group, numbering: getItem.numbering },
            });
          });
        console.log("this is group");
      } else {
        console.log(item);
        this.$router.push({
          path: "item",
          query: { group: item.group, numbering: item.numbering },
        });
      }
    },
  },
  mounted() {},
  created() {
    console.log(this.type);
    if (this.type == "itemGroups") {
      console.log(this.type);
      this.updateItemGroups();
    } else if (this.type == "items") {
      this.updateItems();
    }
  },
  watch: {
    sort(val) {
      this.updateItems();
    },
    search() {
      this.updateItems();
    },
  },
};
</script>
<style  lang="less" scoped>
* {
  margin: 0%;
  padding: 0%;
}

.gird-container {
  width: 100%;
  height: 100%;

  .gird-box {
    position: relative;
    // left: 5%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .gird-item {
      // width: calc(90% /5);
      // max-width: 300px;
      height: auto;
      padding: 10px 5px 10px 5px;
      box-sizing: border-box;
      // min-width: 200px;
      display: flex;

      .item-container {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>